<template>
	<view class="repair-detail-page">
		<!-- 核销码和时间 -->
		<view class="header-info" v-if="detail.verificationCode">
			<view class="verification-code">核销码：{{ detail.verificationCode }}</view>
		</view>

		<!-- 维修信息 -->
		<view class="section">
			<view class="section-title">维修信息</view>
			<view class="info-item">
				<text class="label">维修单号：</text>
				<text class="value">{{ detail.id }}</text>
			</view>
			<view class="info-item">
				<text class="label">维修状态：</text>
				<text class="value">{{ detail.status }}</text>
			</view>
			<view class="info-item">
				<text class="label">车主姓名：</text>
				<text class="value">{{ detail.ownerName }}</text>
			</view>
			<view class="info-item">
				<text class="label">联系方式：</text>
				<text class="value">{{ detail.phone }}</text>
			</view>
			<view class="info-item">
				<text class="label">维修方式：</text>
				<text class="value">{{ detail.repairMethod }}</text>
			</view>
			<view class="info-item">
				<text class="label">取车位置：</text>
				<text class="value">{{ detail.pickupLocation }}</text>
			</view>
			<view class="info-item">
				<text class="label">预约日期：</text>
				<text class="value">{{ detail.appointmentDate }}</text>
			</view>
			<view class="info-item">
				<text class="label">提交日期：</text>
				<text class="value">{{ detail.submitDate }}</text>
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="section">
			<view class="section-title">车辆信息</view>
			<view class="info-item">
				<text class="label">车辆类型：</text>
				<text class="value">{{ detail.vehicleType }}</text>
			</view>
			<view class="info-item">
				<text class="label">车牌号：</text>
				<text class="value">{{ detail.licensePlate }}</text>
			</view>
		</view>

		<!-- 整车照片 -->
		<view class="section">
			<view class="section-title">整车照片</view>
			<image :src="detail.vehicleImage" class="vehicle-image" mode="aspectFit" />
		</view>

		<!-- 维修部位照片 -->
		<view class="section">
			<view class="section-title">维修部位照片</view>
			<view class="repair-images">
				<image v-for="(image, index) in detail.repairImages" :key="index" :src="image" class="repair-image" mode="aspectFit" />
			</view>
		</view>

		<!-- 取消订单按钮 -->
		<view class="cancel-button" v-if="detail.status === '进行中'" @tap="cancelOrder">
			<text>取消订单</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// 维修详情数据
	const detail = ref({
		verificationCode: 'WE343235V',
		id: '3535252',
		status: '进行中',
		ownerName: '张三',
		phone: '1993829282',
		repairMethod: '上门取车',
		pickupLocation: '山阳区32号',
		appointmentDate: '2022/11/10 11:00',
		submitDate: '2022/11/08 12:34',
		vehicleType: '大客车',
		licensePlate: '豫J45323',
		vehicleImage: '/static/logo.png',
		repairImages: ['/static/logo.png', '/static/logo.png'], // 维修部位照片数组
	});

	// 获取路由参数
	onLoad((options) => {
		const { tab, id } = options; // 获取传递的选项卡值和 id
		console.log(options);
		fetchRepairDetail(id); // 根据 id 获取维修详情
	});

	// 获取维修详情
	const fetchRepairDetail = async (id) => {
		try {
			// 模拟请求接口
			// const response = await fetch(`/api/repair-detail?id=${id}`);
			// const data = await response.json();
			// detail.value = data; // 更新维修详情数据
		} catch (error) {
			console.error('获取维修详情失败：', error);
		}
	};

	// 取消订单
	const cancelOrder = () => {
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: (res) => {
				if (res.confirm) {
					// // 调用取消订单接口
					// fetch('/api/cancel-order', {
					// 	method: 'POST',
					// 	body: JSON.stringify({ id: detail.value.id }),
					// })
					// 	.then(() => {
					// 		uni.showToast({
					// 			title: '订单已取消',
					// 			icon: 'success',
					// 		});
					// 		detail.value.status = '已取消'; // 更新状态
					// 	})
					// 	.catch((error) => {
					// 		console.error('取消订单失败：', error);
					// 	});
					detail.value.status = '已取消'; // 更新状态
					detail.value.verificationCode = ''; // 清空核销码
				}
			},
		});
	};
</script>

<style scoped>
	/* 页面整体样式 */
	.repair-detail-page {
		padding: 40rpx;
		background-color: #fff;
	}

	

	/* 核销码和时间 */
	.header-info {
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		text-align: center;
		font-weight: bold;
		
		margin-bottom: 40rpx;
	}

	.time {
		font-size: 28rpx;
		color: #666;
	}

	.verification-code {
		font-size: 35rpx;
		color: #333;
	}

	/* 模块标题 */
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	/* 信息项 */
	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		width: 150rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	/* 图片样式 */
	.vehicle-image,
	.repair-image {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
	}

	/* 维修部位照片容器 */
	.repair-images {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	/* 取消订单按钮 */
	.cancel-button {
		width: 100%;
		height: 80rpx;
		background-color: #f56c6c;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
</style>